<template>
    <div class="code-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>实训报告</el-breadcrumb-item>
            </el-breadcrumb>
            <bread-crumb-back></bread-crumb-back>
        </div>
        <div class="content-box" style="position: relative;">
            <div class="student-editor-box" v-if="reportData.uploadMark == 0 || reportData.uploadMark == null">
                <div class="editor-title">
                    <img src="./../../assets/images/editor_icon.png" />
                    实验报告详情
                </div>
                <!-- <vue-editor v-model="reportContent"></vue-editor> -->
                <div id="report-editor">
                    <div id="report-editor-menu" style="line-height:24px;"></div>
                    <div id="report-editor-editor" style="width:auto; height:600px;"></div>
                    <input type="hidden" v-model="reportContent" id="report-editor-text" />
                </div>
                <div class="editor-btn-box">
                    <el-button type="primary" @click="saveFn(0, 1)">保存</el-button>
                    <el-button type="primary" @click="saveFn(1, 2)">提交</el-button>
                </div>
                <!-- <div class="btn-box" v-if="userId != null" @click="notesFn"> -->

            </div>
            <div v-else class="report-detail">
                <div class="report-detail-title">
                    {{ title }}
                </div>
                <div class="report-detail-btn-box" v-if="reportData.reportScore != null">
                    <button @click="fileDownload">下载</button>
                </div>
                <div class="report-detail-form" v-if="reportData.reportScore != null">
                    <div class="form-item">
                        <div class="item-title">
                                <img src="./../../assets/images/report_icon1.png" />
                                教学评价
                        </div>
                        <div class="item-content">
                            <div class="item-box">
                                得分:
                                <span class="item-box-text">{{reportData.reportScore}}</span>
                            </div>
                            <div class="item-box">
                                成绩:
                                <span class="item-box-text">
                                    <em style="font-style: normal;" v-if="reportData.reportLevel == 4">优</em>
                                    <em style="font-style: normal;" v-else-if="reportData.reportLevel == 3">良</em>
                                    <em style="font-style: normal;" v-else-if="reportData.reportLevel == 2">中</em>
                                    <em style="font-style: normal;" v-else-if="reportData.reportLevel == 1">差</em>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="item-title">
                                <img src="./../../assets/images/report_icon2.png" />
                                教师评语
                        </div>
                        <div class="item-content">
                            <div class="item-text">
                                {{reportData.reportEvaluation}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="report-detail-info">
                    <!-- <vue-editor disabled v-model="reportContent"></vue-editor> -->
                    <!-- <div class="report-editor">
                        <div id="report-editor-menu" style="line-height:24px;"></div>
                        <div id="report-editor-editor" style="width:auto; height:600px;"></div>
                        <input type="hidden" v-model="reportContent" id="report-editor-text" />
                    </div> -->
                    <div class="environment-editor w-e-text" style="border:none;" v-html="reportContent"></div>
                </div>
            </div>
            <div v-if="reportData.uploadMark == 0 || reportData.uploadMark == null" class="student-editor-btn-box" @click="notesFn">
                <!-- <button><img src="./../../assets/images/report_icon3.png" /></button> -->
                <button><img src="./../../assets/images/report_icon4.png" /></button>
            </div>
            <el-dialog class="notes-dialog" title="实训笔记" :visible.sync="notesDialogFormVisible">
                <div class="notes-search-box">
                    <div class="search-item">
                        <span class="search-title">案例名称: </span>
                        <el-select
                            v-model="classValue"
                            placeholder="请选择案例名称"
                            value-key="value">
                            <el-option
                            v-for="item in classStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <el-button type="primary" @click="searchFn">搜索</el-button>
                    </div>
                </div>
                <div class="notes-title">
                    实训笔记
                </div>
                <div class="notes-content">
                    <div class="notes-item" v-for="(item, index) in notesDataList" :key="index">
                        <div class="item-title">
                            <span>{{ index + 1 }}</span>
                            <span>{{ item.name }}</span>
                        </div>
                        <div class="item-content" v-html="item.instructions"></div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="closeDialog">关闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    // import { VueEditor } from 'vue2-editor'
    import E from 'wangeditor'
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import pieEchart from './../../components/pieEchart.vue'
    export default {
        components: {
            // VueEditor,
            pieEchart,
            BreadCrumbBack
        },
        data () {
            return {
                reportId: '',
                userId: '',
                reportData: '',
                reportEditor: null,
                reportContent: '',
                uploadMark: '',
                title: '',
                classStatus: [],
                classValue: '',
                htmlForEditor: '<h1>Some initial content</h1>',
                //实训笔记
                notesDialogFormVisible: false,
                notesDataName: '',
                notesDataList: '',
                status: false,
                editorMenus: [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                    'code',  // 插入代码
                ],
            }
        },
        created () {
            this.reportId = this.$route.query.reportId
            this.userId = this.$route.query.userId
            this.init()
            this.initSelect()
        },
        mounted () {

        },
        methods: {
            init() {
                let self = this
                self.$http.post('/dataplatform/basis/functions/report/ts/getStuEnvironmentReport?projectId='+self.reportId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.reportData = res.data
                        self.title = res.data.name
                        if(res.data.uploadMark == null){
                            self.reportContent = res.data.reportModel
                        }else{
                            self.reportContent = res.data.reportContent

                        }
                        if (res.data.uploadMark == 1 || res.data.uploadMark == 2) {
                            self.$nextTick(() => {
                                $('.ql-toolbar').hide()
                                $('#quill-container').css('border','none')
                            })
                        }else{
                            self.$nextTick(() => {
                                self.reportEtiorCatchData()
                            })
                        }
                        this.uploadMark = res.data.uploadMark
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验报告详情
            reportEtiorCatchData(){
                this.reportEditor = new E('#report-editor-menu', '#report-editor-editor')
                this.reportEditor.customConfig.onchange = (html) => {
                    this.reportContent = html
                }
                this.reportEditor.customConfig.zIndex = 100
                this.reportEditor.customConfig.uploadImgShowBase64 = true
                this.reportEditor.customConfig.menus = this.editorMenus
                this.reportEditor.create()     // 创建富文本实例
                this.reportEditor.txt.html(this.reportContent)
            },
            initSelect(){
                let self = this
                self.$http.get('/dataplatform/chapter/getNotesSearchNames?reportId='+self.reportId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for(let i = 0; i < res.data.itemList.length; i++){
                            let itemListJson = {}
                            itemListJson.label = res.data.itemList[i].name
                            itemListJson.value = res.data.itemList[i].id
                            self.classStatus.push(itemListJson)
                        }
                        self.classValue = self.classStatus[0].value
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实训笔记
            notesFn(){
                let self = this
                self.$http.get('/dataplatform/chapter/getStudentNotes?itemId='+self.classValue+'&userId='+(self.userId == null ? '' : self.userId)).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.notesDataList = res.data.stepList
                        self.notesDataName = res.data.chapter.name
                        self.notesDialogFormVisible = true
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //关闭需继续详情
            closeDialog() {
                let self = this
				self.notesDialogFormVisible = false
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.initTable()
            },
            //弹窗搜索
            searchFn(){
                this.notesFn()
            },
            //保存
            saveFn(upload_markID, typeId){
                let self = this

                self.$http.post('/dataplatform/basis/functions/report/s/saveEnvironmentReport',{
                    type: typeId,
                    reportContent: self.reportContent == '' ? null : self.reportContent,
                    projectId: self.reportId,
                    //区分状态标记1.提交 null&&0未提交
                    upload_mark: upload_markID
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(typeId == 1){
                            self.$message({
                                type: 'success',
                                message: '保存成功'
                            })
                        }else if(typeId == 2){
                            self.$message({
                                type: 'success',
                                message: '提交成功'
                            })
                            self.$router.push({
                                path: '/student/trainingReport'
                            })
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //文件下载
            fileDownload(){
                let self = this
                let content =   '<!doctype html>'+
                                '<html>'+
                                '<head>'+
                                '<meta charset="utf-8">'+
                                '<title>'+self.reportData.userName+'-'+self.reportData.name+'-案例报告+'+'</title>'+
                                '<style>.ql-container{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li:before,.ql-editor ul[data-checked=true]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{}.ql-editor ul[data-checked=false]>li:before{}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) ". "}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) ". "}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) ". "}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) ". "}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) ". "}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) ". "}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) ". "}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:"";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover{color:#06c} </style>'+
                                '<style>.report-detail{padding: 0 40px;}.report-detail .report-detail-title{font-size: 28px;color: #333;border-bottom: solid 1px #bfbfbf;text-align: center;padding-bottom: 45px;margin-top: 45px;}.report-detail .report-detail-btn-box{display:none;overflow: hidden; margin: 20px 0 10px;}.report-detail .report-detail-btn-box button{float: right;width: 76px;height: 26px; line-height: 26px;color: #e38f88; text-align: center; box-sizing: border-box;border: solid 1px #e38f88;margin-left: 10px;cursor: pointer;}.report-detail .report-detail-form{ border-bottom: solid 1px #bfbfbf;padding: 0 18px; margin: 50px 35px 0;}.report-detail .report-detail-form .form-item{margin-bottom: 60px; overflow: hidden;}.report-detail .report-detail-form .form-item .item-title{font-size: 16px;}.report-detail .report-detail-form .form-item .item-title img{ margin-right: 15px;}.report-detail .report-detail-form .form-item .item-content{padding-left: 20px;margin-top: 20px; overflow: hidden;}.report-detail .report-detail-form .form-item .item-content .item-box{float: left;font-size: 16px;margin-right: 45px;}.report-detail .report-detail-form .form-item .item-content .item-box input{width: 60px;height: 20px;border:solid 1px #d5d5d5;padding: 5px; box-sizing: border-box;background: #f7f7f7;color: #c82011;}.report-detail .report-detail-form .form-item .item-content .item-box span{border-bottom:solid 1px #7a7a7a;width: 20px;display: inline-block;color: #c82011;}.report-detail .report-detail-form .form-item .item-content .item-box span.item-box-text{border: none;color: #c82011;}.report-detail .report-detail-form .form-item .item-content .item-text{line-height: 24px;}.report-detail .report-detail-form .form-item .item-content .item-textarea{padding: 0 20px;overflow: hidden;}.report-detail .report-detail-form .form-item .item-content .item-textarea textarea {width: 100%;height: 150px;border:solid 1px #d5d5d5;background: #f7f7f7;-webkit-appearance: none;padding: 10px;box-sizing: border-box;float: left;width: 85%;margin-right: 10px; } .report-detail .report-detail-info {margin: 80px 35px 0;padding: 0 18px;}</style>'+
                                '</head>'+
                                '<body>'+
                                     '<div class="content-box">'+$('.content-box').html()+'</div>'+
                                '</body>'+
                                '</html>'
                self.funDownload(content, ''+self.reportData.userName+'-'+self.reportData.name+'-案例报告.html')
            },
            funDownload(content, filename){
                var eleLink = document.createElement('a');
                eleLink.download = filename;
                eleLink.style.display = 'none';
                // 字符内容转变成blob地址
                var blob = new Blob([content]);
                eleLink.href = URL.createObjectURL(blob);
                // 触发点击
                document.body.appendChild(eleLink);
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
            }
        }
    }
</script>
